<template>
  <!--委外管理-委外对账-->
  <section class="page outsource-reconciliation-manage">
    <data-form :model="model" @onSearch="refreshData" autoSearch>
      <!--输入区域-->
      <template slot="inputs">
        <el-form-item label="批次号" prop="outBatch">
          <el-input v-model="model.outBatch"></el-input>
        </el-form-item>
        <el-form-item label="订单编号" prop="caseNumber">
          <el-input v-model="model.caseNumber"></el-input>
        </el-form-item>
        <el-form-item label="账单状态" prop="checkStatus">
          <el-select clearable placeholder="请选择" v-model="model.checkStatus">
            <el-option :key="index" :label="name" :value="code" v-for="{index,name,code} in $dict.getDictData('CheckStatus')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入账时间" prop="entryTime">
          <el-date-picker :editable="false" clearable placeholder="选择日期时间" type="daterange" v-model="model.entryTime"></el-date-picker>
        </el-form-item>
        <el-form-item label="受托方" prop="outId">
          <el-select clearable placeholder="请选择" v-model="model.outId">
            <el-option :key="item.id" :label="item.outsName" :value="item.id" v-for="item in outSourceList"></el-option>
          </el-select>
        </el-form-item>
      </template>
    </data-form>
    <!-- 数据列区 -->
    <data-box :data="dataSet" :page="pageService" :selectionList.sync="selectionList" @onPageChange="refreshData">
      <template slot="buttons">
        <el-button @click="exportBill" v-auth="1020">对账单导出</el-button>
        <el-button @click="dialog.openBillCheck=true" v-auth="1021">对账单核对</el-button>
        <el-button @click="dialog.openCreatebill=true" v-auth="1022">生成账单</el-button>
        <el-button @click="dialog.uploadFile=true" v-auth="1023">导入还款记录</el-button>
      </template>
      <template slot="columns">
        <el-table-column :min-width="$helper.getOperateWidth(1)" label="操作">
          <template slot-scope="scope">
            <el-button :disabled="scope.row.checkStatus!=='CHECK_FAILURE'" @click="rowData=scope.row, dialog.openBillSurvey=true" type="text" v-auth="233">调账</el-button>
          </template>
        </el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(6)" label="订单编号" prop="caseNumber">
          <template slot-scope="scope">
            <el-button @click="openExecutionPage(scope.row)" type="text">{{scope.row.caseNumber}}</el-button>
          </template>
        </el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="受托方" prop="outsName"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="批次号" prop="outBatch"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(5)" label="客户姓名" prop="personalName"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="手机号" prop="mobileNo"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(6)" label="身份证号" prop="idCard"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="贷款类型" prop="loanType"></el-table-column>
        <el-table-column :formatter="row => $common.isNotValue(row.overduePeriod) ? '':`M${row.overduePeriod}`" :min-width="$helper.getColumnWidth(3)" label="逾期期数" prop="overduePeriod"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="逾期天数" prop="overdueDays"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="分案时期数" prop="disOverduePeroid">
          <template slot-scope="scope">
            <span v-if="scope.row.disOverduePeriod">M{{scope.row.disOverduePeriod}}</span>
          </template>
        </el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(3)" label="分案金额" prop="outAmount"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(3)" label="还款金额" prop="repaymentAmount"></el-table-column>
        <el-table-column :formatter="(row) => $filter.dateTimeFormat(row.repaymentTime)" :min-width="$helper.getColumnWidth(5)" label="还款时间" prop="repaymentTime"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(5)" label="入账金额" prop="enterAmount"></el-table-column>
        <el-table-column :formatter="(row) => $filter.dateTimeFormat(row.entryTime)" :min-width="$helper.getColumnWidth(5)" label="入账时间" prop="entryTime"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(5)" label="受托方确认金额" prop="outConfirmAmount"></el-table-column>
        <el-table-column :formatter="(row) => $filter.dictConvert(row.collectionStatus,'CollectionStatus')" :min-width="$helper.getColumnWidth(4)" label="案件状态" prop="collectionStatus"></el-table-column>
        <el-table-column :formatter="(row) => $filter.dictConvert(row.checkStatus,'CheckStatus')" :min-width="$helper.getColumnWidth(5)" label="账单状态" prop="checkStatus"></el-table-column>
        <el-table-column :formatter="(row) => $filter.dictConvert(row.adjustStatus,'AdjustStatus')" :min-width="$helper.getColumnWidth(4)" label="调账状态" prop="adjustStatus"></el-table-column>
      </template>
    </data-box>

    <!--生成账单-->
    <el-dialog :close-on-click-modal="false" :visible.sync="dialog.openCreatebill" @open="() => this.$nextTick(() => this.$refs['create-bill'].refresh())" title="生成账单" width="400px">
      <create-bill @close="dialog.openCreatebill=false" @refreshData="refreshData" ref="create-bill"></create-bill>
    </el-dialog>

    <!--对账单核对-->
    <el-dialog :close-on-click-modal="false" :visible.sync="dialog.openBillCheck" @close="dialog.openBillCheck=false" title="对账单核对" width="700px">
      <bill-check :checkModel="checkModel" @close="dialog.openBillCheck=false" @refreshData="refreshData" ref="bill-check"></bill-check>
    </el-dialog>

    <!-- 导入还款记录 -->
    <el-dialog :close-on-click-modal="false" :visible.sync="dialog.uploadFile" @close="dialog.uploadFile = false" title="导入还款记录" width="700px">
      <import-pay-record @close="dialog.uploadFile=false" @refreshData="refreshData" ref="import-pay-record"></import-pay-record>
    </el-dialog>

    <!--调帐-->
    <el-dialog :close-on-click-modal="false" :visible.sync="dialog.openBillSurvey" @close="$refs['bill-survey'].reset();dialog.openBillSurvey = false;" title="调帐审核">
      <bill-survey :rowData="rowData" @close="dialog.openBillSurvey=false" @refreshData="refreshData" ref="bill-survey"></bill-survey>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Auth, Layout, Dependencies } from "~/core/decorator";
import DataForm from "~/components/common/data-form.vue";
import DataBox from "~/components/common/data-box.vue";
import BillComponents from "~/components/outsource-manage/outsource-reconciliation-manage/index";
import FileUpload from "~/components/common/file-upload.vue";
import { PageService } from "~/utils/page.service";
import { SortService } from "~/utils/sort.service";
import { OutsourceReconciliationManageService } from "~/services/domain-service/outsource-reconciliation-manage.service";
import {
  ApplyType,
  CASE_CHANNEL,
  CASE_HALT_CATEGORY,
  MENU_CHANNEL
} from "~/config/enum.config";
import { Mutation, Getter, namespace, State } from "vuex-class";

@Auth(1007)
@Layout("workspace")
@Component({
  components: {
    FileUpload,
    ...BillComponents
  }
})
export default class OutsourceReconciliationManageIndex extends Vue {
  @Dependencies(OutsourceReconciliationManageService)
  private outsourceReconciliationManageService: OutsourceReconciliationManageService;
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;
  @State private outSourceList;

  private model: any = {
    outBatch: "",
    caseNumber: "",
    outId: "",
    checkStatus: "",
    entryTime: []
  };
  // 数据列表
  private dataSet: any[] = [];
  // 弹框控制
  private dialog: any = {
    openBillCheck: false,
    openCreatebill: false,
    openBillSurvey: false,
    openImportPayRecord: false,
    uploadFile: false
  };

  private checkModel: any = {};

  private fileList: any = [];

  private selectionList: any[] = [];
  private check: any = {};
  private rowData: any = null;
  private recCheckData: any = {}; //调账的参数

  private refreshData() {
    this.outsourceReconciliationManageService
      .caseOutContrastList(this.model, this.pageService)
      .subscribe(data => {
        this.dataSet = data;
        this.selectionList = [];
      });
  }

  /**
   * 对账单导出
   */
  private exportBill() {
    if (this.dataSet.length === 0) {
      this.$message.info("暂无可导出的数据");
      return;
    }
    let text: string = "";
    let caseIds: any[] = [];
    const sum = this.selectionList.length;

    if (sum !== 0) {
      text = "已选择" + sum + "个案件，确认导出对账单?";
      caseIds = this.selectionList.map(v => v.id);
    } else if (this.validateModel()) {
      text = "此操作将按照搜索过滤条件导出对账单，确认导出?";
    } else {
      text = "此操作将导出所有对账单，确认导出?";
    }
    const params = {
      caseIds,
      batchNumber: this.model.batchNumber,
      checkStatus: this.model.checkStatus,
      entryTimeStart: this.model.entryTime[0],
      entryTimeEnd: this.model.entryTime[1],
      outId: this.model.outsName
    };
    this.$confirm(text, "导出对账单", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(() => {
        this.confirmExport(params);
      })
      .catch(() => {
        this.$message.success("已取消");
      });
  }

  private validateModel() {
    return (
      this.model.batchNumber ||
      this.model.caseNumber ||
      this.model.outId ||
      this.model.checkStatus ||
      this.model.entryTime.length !== 0
    );
  }

  /**
   * 确认导出对账单
   */
  private confirmExport(data: any) {
    this.outsourceReconciliationManageService
      .exportBills(data, true)
      .subscribe(data => this.$common.downloadFile(data.url));
  }

  /**
   * 进入查看执行页
   */
  private openExecutionPage(row) {
    this.$router.openCaseDetail(row.id, {
      menuChannel: MENU_CHANNEL.Outsource_checking,
      hiddenCaseList: true,
      hiddenAction: true
    });
  }

  private mounted() {
    this.refreshData();
  }
}
</script>

<style lang="less" >
.btn-group {
  display: flex;
  justify-content: flex-end;
  padding-top: 20px;
}
</style>
